<template>
  <div class="viewer-head" ref="viewerHead">
    <div class="back" @click="back">
      <Icon size="28" class="pointer" name="back"></Icon>
    </div>
    <MainTabs
      class="tab"
      :model-value="modelValue"
      :options="tabOptions"
      center
      @update:model-value="(v) => $emit('update:modelValue', v)"
    ></MainTabs>
  </div>
</template>

<script setup>
import { inject, ref } from 'vue'
import MainTabs from '@/components/tabs/MainTabs.vue'
import { usePreventTouchmove } from '@/compositions/mobile/preventTouchmove'
import { useBack } from '@/compositions/viewer/back'

defineProps({
  modelValue: {
    type: [String, Number],
    required: true,
  },
  tabOptions: {
    type: Array,
    required: true,
  },
})

const emits = defineEmits(['update:modelValue', 'back'])

const viewerRouter = inject('viewerRouter')
const back = useBack(viewerRouter, () => emits('back'))

const viewerHead = ref(null)
usePreventTouchmove(viewerHead)
</script>

<style lang="scss" scoped>
.viewer-head {
  width: calc(100% - 4rem);
  height: 2.625rem;
  margin: 0 1rem 0.375rem;
  display: flex;
  align-items: center;
  position: relative;

  .back {
    margin-top: 0.5rem;
  }

  .tab {
    flex-grow: 1;
  }
}
</style>
